<template>
	<div class="tabs">
		<li class="tab" :class="{active:oindex==index}" v-for="(item,index) in tabsData"
			@click="tabAction(index)">{{item}}</li>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				tabsData: ["首页","消息","发现","我的"],
				oindex: 0
			}
		},
		methods:{
			tabAction(index){
				this.oindex = index;
				this.$emit("passTabs",{
					index,
					title: this.tabsData[index]
				})
			}
		}
	}
</script>
<!--scoped样式只会作用当前组件里的结构-->
<style scoped>
	.tabs{
		display: flex;
		position: fixed;
		width: 100%;
		/*底部高度标准49px*/
		height: 49px;
		left: 0;
		bottom: 0;
		background: #01AAED;
		z-index: 10;
	}
	.tabs .tab{
		flex: 1;
		text-align: center;
		height: 49px;
		color: #fff;
		line-height: 49px;
	}
	.tabs .active{
		background: #007AFF;
	}
</style>